大家好，我是 Eric。
前兩天分享了 CSS 的基本版面配置方式，以及媒體查詢 (media query) 的實作方法。今天，我們就回到 CSS 的入門篇章：標題與字型。
樣式屬性 | 屬性值 | 說明
-------+-------+-------
background-color | rgb()/rgba()/16 進位顏色 | 元素的背景顏色。
color | rgb()/rgba()/16 進位顏色 | 指定文字 (內容) 的顏色。可以透過 16 進位 (如：#ffffff) 或是 rgb()/rgba() (後者可以指定不透明度) 的方式 (如：rgb(0,255,255) 與 rgba(75,23,255,0.7)) 來決定。
樣式屬性 | 屬性值 | 說明
-------+-------+-------
border | {粗細} {樣式} {顏色} | 指定四周框線顏色與樣式。粗細可以使用各種常見單位，但基本上都會使用 px。樣式則可決定是要實線 (solid)、雙層實線 (double) 以及虛線 (dotted) 等樣式。
border-top/right/bottom/left | {粗細} {樣式} {顏色} | 指定單邊框線顏色與樣式。屬性值與 border 相同。
border-radius | px/em/rem/% | 指定元素的圓角半徑。要製作圓角的物件 (如按鈕) 時相當實用。
box-sizing | border-box/content-box | 定義元素區塊框線、邊框間距 (padding) 是以外加 (content-box) 或內含 (border-box) 的方式列入計算。預設是 content-box，因此在設定元素寬度與高度時，實際大小需要再加上框線與邊框間距的寬度。
樣式屬性 | 屬性值 | 說明
-------+-------+-------
font-family | 字型系列名稱 | 字型系列名稱，可以是系統內建字型，也可以是網頁字型。
font-size | px/em/rem | 決定文字大小。
font-weight | 100/200/.../900 | 決定文字粗細，但須看字型系列是否支援。
text-decoration | none/underline/overline/line-through | 文字底線、頂線與刪除線效果。
text-transform | uppercase/lowercase/capitalize | 全部大寫/全部小寫/首字母大寫。
樣式屬性 | 屬性值 | 說明
-------+-------+-------
line-height | 行高倍數/px/em/rem | 決定元素的行高。除了常見單位之外，也可以直接填寫整數，例如 line-height: 1.5; 代表 1.5 倍行高。
letter-spacing | px/em/rem | 決定字元間的距離。可使用常見的單位。
text-align | left/right/center | 就是我們一般所謂的置左、置右、置中。不適用於 display: inline; 的元素。
word-break | break-all/break-word | 文字溢出時如何換行。使用 break-all 會將完整單字分割開來。例如：break 可能會變成 bre /換行/ ak。break-word 則會以單詞為單位進行分割 (東亞字元不適用)。
word-wrap | normal/break-word | 遇到長單字溢出時，是否要換行。使用 break-word 會換行，normal 則讓單字直接溢出於文字之外。
上述的樣式屬性佔了 Twenty Twenty style.css 中的樣式約一半以上，可以說最常用的 CSS 樣式都包含在這裡了。
我們可以參考 style.css 中第 116 行，這一段是在替整個網站的樣式做基礎設定。
/* style.css Line 116 */
html {
font-size: 62.5%; /* 1rem = 10px */
}
body {
background: #f5efe0;
box-sizing: border-box;
color: #000;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
font-size: 1.8rem;
letter-spacing: -0.015em;
text-align: left;
}
首先，在 style.css 中重新定義預設的 1rem。一般來說，1rem 是 16px，但這裡透過定義 <html> 的 font-size: 62.5%，將整份文件的 1rem 定義為 16 * 62.5% = 10px。這麼做可能是為了後續樣式計算方便。
在 <body> 的樣式中，我們可以看到 box-sizing 這個樣式屬性，使用的是 border-box 而非預設的 content-box。這是因為，我們希望 <body> 的寬度可以是固定值，不會因為我們設定邊框間距而有變化。
在字型系列 font-family 屬性中，我們可以看到 Twenty Twenty 主要使用了蘋果的系統字型，因此在 Microsoft 的作業系統中，其預設字型可能會一直遞補到 sans-serif 這組字型 (顯示上有可能變成新細明體)。
我們接下來繼續說明如何設定不同的字型系列。
一般來說，我們會在網站上使用的字型，包含了系統內建字型，以及網路字型 (web fonts)。以 Twenty Twenty 的樣式為例，它便使用了 Apple 的系統字型。
使用系統字型最大的優點，在於不需要額外下載字型檔，因此對於網頁的載入速度相當有幫助。但是不同的作業系統，擁有的字型集合不盡相同，甚至需要考慮作業系統的語言是否包含該字型，所以基本上無法全部列在樣式表當中。也因為不同的作業系統會呈現不同的樣貌，因此對設計一致性有負面的影響。
這也是為什麼網路字型會興起。
雖然網路字型多了載入的時間，但是因為在不同裝置上都可以支援，因此在當代網站開發的過程中，都會建議使用網路字型，而不應該過度依賴系統字型。
自訂網路字型的方法，各廠商都有所不同。這邊僅針對 Google Fonts 中的 Noto Sans TC 做說明。
在上述的連結中，我們可以看到 Google 的安裝指示，我們直接看到 <link> 的方法，是要將下列語法置於 <head> 中：
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100&display=swap" rel="stylesheet">
讓我們複習一下〈Day 4 用 WordPress 了解 head 記載的中繼資料及靜態資源〉中的內容：我們可以透過 wp_enqueue_style 這個函式，將上述的樣式嵌入 WordPress 中。
雖然 PHP 的細節會在後面章節中才提及，但這邊先提供程式碼片段，可以將這個片段放置在佈景主題的 functions.php 中，就能達到一樣的效果：
function webfont_enqueue(){
wp_enqueue_style( 'noto-sans', 'https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100&display=swap' );
add_action( 'wp_enqueue_scripts', 'webfont_enqueue' );
接著，我們再回到我們 style.css 中，按照 Google Fonts 的說明，寫入以下的樣式：
選擇器 {
font-family: 'Noto Sans TC', sans-serif;
}
事實上，這篇文章第一段列舉的樣式屬性，已經包含了實務上最常用的屬性。但網站的排版，除了前兩天提到的版面配置，以及今天的樣式屬性外，還有一項相當重要的元素：留白 (spacing)。
明天，我們就來了解，設計師與前端工程師最大的溝通障礙：「這裡空間可以大一點嗎？」
iThome鐵人賽
看影片追技術